<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="stylesheet" href="stylesheets/zui.min.css"/>
    <link rel="stylesheet" href="stylesheets/main.css" id="css"/>
    <script src="javascripts/jquery-1.10.1.min.js"></script>
    <script src="javascripts/zui.min.js"></script>
    <script src="javascripts/footer.js"></script>
    <title>喊单设置</title>
    <script>
    $(function(){
    	//加载当前用户已选品种
    	var userInfo = getLocalUserInfo();
    	/* var mphone = userInfo.mphone; */
    	
    	var loadSettingItemFun = function(callback){
    		$.ajax({
    			url:'../setting/notifySettingDict.do',
    			type:'get',
    			dataType:'json',
    			success:function(d){
    				if(d.success){
    					var notifyTypeArr = d.data;
    					var $template = $('#template > .business-notifySetting');
    					for(var i in notifyTypeArr){
    						var $item = $template.clone();
    						
    						$item.find('.business-item').attr('name',notifyTypeArr[i].typecode).html(notifyTypeArr[i].typename);
    						$('#setting').append($item);
    					}
    				}
    				callback();
    			}
    		});
    	};
    	
    	//初始化函数
    	var initFun = function(){
    		loadSettingItemFun(function(){
    			$.ajax({
    				url:'../setting/usercategory.do',
    				type:'post',
    				dataType:'json',
    				/* data:{
    					mphone:mphone
    				}, */
    				success:function(d){
    					if(d.success){
    						var data = d.data;
    						var str ='';
    						var sle = '';
    						for(var i = 0;i< data.length;i++){
    							if(data[i].status == '1'){
    								$('#setting').find('.business-item[name="'+data[i].categoryCode+'"]').attr('status',data[i].status).addClass('list-set-active');
    							}
//    	 						str += "<div class='col-xs-4'  ><h4 id='" + data[i].id + "' status='" + data[i].status +"'   class= '" + sle +"'>" +data[i].categoryName + "</h4></div>"
    						}
//    	 					document.getElementById('setting').innerHTML = str;
    					} 
    				}
    			});
    		});
    	};
    	
    	initFun();
    	
    });
    $(document).on("click",".setting-box>div>h4",function(){
    	var status = $(this).attr('status');
    	var code = $(this).attr('name');
    	var info = "";
    	if(status == '1'){
    		$(this).removeClass("list-set-active");
    		$(this).attr('status','0');
    		info ="喊单品种  " + $(this).text() + " 取消成功";
    	}else{
    		$(this).addClass("list-set-active");
    		$(this).attr('status','1');
    		info ="喊单品种  " +  $(this).text() + " 设置成功";
    	}
    	status = $(this).attr('status');
    	$.ajax({
			url:'../setting/saveset.do',
			type:'post',
			dataType:'json',
			data:{
				code:code,
				status:status
			},
			success:function(d){
				if(!d.success){
					alert('设置失败');
				} else{
					heartFun(false,function(){
						//如果当前用户信息存在，则通过全局websocket通知服务器端用户设置信息已刷新
						userInfo = getLocalUserInfo();
						if(userInfo){
				    		var data =  $.extend({_requestType:'userInfo'}, userInfo);
							var userInfoJsonStr = JSON.stringify(data);
							gloabWs.send(userInfoJsonStr);
						} 
					});//手动心跳一次，刷新当前用户信息，实际也刷新了当前用户在浏览器端缓存的喊单设置信息
					
					
					document.getElementById('info').innerHTML = info;	
				}
			}
		});
    });
    
    </script>
</head>
<body>
<div class="container main">
    <div class="row bottom-border listSet-title-box">
        <div class="col-xs-12"  style="text-align: center;">
            <h3>喊单品种设置</h3>
        </div>
    </div>
    <div class="row setting-box" id="setting">
    <!-- list-set-active -->
<!-- 	    <div class="col-xs-4"><h4 class="business-hj">黄金</h4></div> -->
<!-- 	    <div class="col-xs-4"><h4 class="business-yy">原油</h4></div> -->
<!-- 	    <div class="col-xs-4"><h4 class="business-by">白银</h4></div> -->
<!-- 	    <div class="col-xs-4"><h4 class="business-wh">外汇</h4></div>  -->
    </div>
    <div class="row save-btn-box">
        <div class="col-xs-12" id='info' style="text-align: center;color: red;">
          <!--   <button class="btn btn-danger">保存</button> -->
        </div>
    </div>
   <footer class="nav-footer">
			<div class="col-xs-3" id="hall" >
				<i class="icon icon-home"></i>
				<h4>解盘</h4>
			</div>
			<div class="col-xs-3" id="notify"  >
				<i class="icon icon-volume-up"></i>
				<h4>喊单</h4>
			</div>
			<div class="col-xs-3" id= "news" >
				<i class="icon icon-globe"></i>
				<h4>资讯</h4>
			</div>
			<div class="col-xs-3  footer-nav-active" id="my" >
				<i class="icon icon-user"></i>
				<h4>个人中心</h4>
			</div>
</footer>
</div>
<script src="javascripts/main.js"></script>

<script>
   
	

    /**
     * 设置项选中状态控制
     */
    shoutListSetActive();
    function shoutListSetActive(){
        var $box = $(".setting-box>div>h4");
        $box.click(function () {
            var $this = $(this);
            ///$box.removeClass("list-set-active");
            $this.addClass("list-set-active")
        });
    }
</script>
<div id="template" style="display:none;">
	<div class="col-xs-4 business-notifySetting"><h4 class="business-item"></h4></div>
</div>
</body>
</html>